<!doctype html>
<head>
  <title>Async Script Execution Order</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <link rel="preload" as="script" href="resources/async-script.js?preload">
</head>
<body>
  <!-- Note: This test serves mainly to document the current scheduling behavior
       of async scripts with respect to other scripts and events in the loading
       pipeline. It does not represent the "ideal" or "desired" behavior, so
       changing it is probably fine. -->
  <script>
    setup({single_test: true})

    const logs = [];
    function logScript(msg) {
      logs.push(msg);
    }
    window.onload = e => {
      const actualOrder = logs.join(";");
      const expectedOrder = "Async;Async;Async;inline1;external;inline2;DOMContentLoaded";
      scriptlog.textContent += actualOrder;
      assert_equals(actualOrder, expectedOrder);
      done();
    };
    document.addEventListener('DOMContentLoaded', e => { logScript('DOMContentLoaded'); });
  </script>

  <script async src="resources/async-script.js?1"></script>
  <script async src="resources/async-script.js?2"></script>
  <script async src="resources/async-script.js?preload"></script>
  <link rel=stylesheet href=resources/main.css?pipe=trickle(d1)>
  <pre id="scriptlog"></pre>
  <script>
    logScript('inline1');
  </script>
  <h1>
    Fast finished parsing, slow first paint
  </h1>

  <script src="resources/external.js?first&pipe=trickle(d2)"></script>
  <script>
    logScript('inline2');
  </script>
</body>
